<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>万里云平台 -- 打印模版设计</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../../static/font-awesome-4.7.0/css/font-awesome.min.css" >
	<link rel="stylesheet" href="../../../static/jquery-ui-1.12.1/jquery-ui.min.css" >
	<link rel="stylesheet" href="../../../static/css/print/print_add.css" >
	<script type="text/javascript" src="../../../static/js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="../../../static/layer/layer.js"></script>
	<script type="text/javascript" src="../../../static/js/common.js"></script>
	<script type="text/javascript" src="../../../static/jquery-ui-1.12.1/jquery-ui.min.js"></script>
	<script type="text/javascript" src="../../../static/js/print/print_data.js"></script>
	<script type="text/javascript" src="../../../static/js/print/print_property.js"></script>
	<style>
		#sortablefs{position: absolute;left:220px;top:0px;border:1px solid #69C1F2;padding: 0px;margin: 0px;height: 98%;overflow: auto;}
		#sortable { list-style-type: none; margin: 0; padding: 5px; width: 200px;}
		#sortable li { margin: 0 3px 3px 3px; font-size: 13px; height: 18px;padding: 5px 15px 5px 15px;position: relative;cursor: pointer; }
		#sortable li span { position: absolute; left:0px; }
		#left{background:none ;border:1px solid #69C1F2;height: 98%;overflow: auto;width:190px;padding: 0px;margin: 0px;margin-left:10px;}
		#sortable i{position: absolute;    right: 9px;font-size: 16px;}
		#sortable i:hover{color:red;}
	</style>
</head>
<body >
<fieldset id="left" style="">
	<legend>所有可使用列</legend>
</fieldset>
<fieldset id="sortablefs">
	<legend>表格列</legend>
	<ul id="sortable">
	</ul>
</fieldset>

<fieldset id="property" style="position: absolute;left:450px;top:0px;border:1px solid #69C1F2;height: 98%;padding: 0px 5px;margin: 0px;">
	<legend>列属性</legend>
</fieldset>
<script>
	var frameType = 'table';
    $( function() {

        var bodys = ordersData.orders[0].orderDetail[0];
        if(ordersData.orders[0].orderDetail[1].length>0){
            for( var i=0 ; i<ordersData.orders[0].orderDetail[1].length ; i++ ){
                bodys = parent.mergeArr(bodys,ordersData.orders[0].orderDetail[1][i]);
            }
        }
        createLeftLabel(bodys,'所有可使用列');

        $( "#sortable" ).sortable();

        $( "#sortablefs" ).droppable({
            drop: function (event,ui) {
                var dragEle = ui.draggable;
                if( dragEle.attr('id') && dragEle.attr('select').length>0 ){
                    return;
                }
                createLi({text:dragEle.text(),name:dragEle.data('name')});
            }
        });

        for(var i=0 ; i<columns.data.length ; i++){
            $('#property').append(createPrintTable(columns.data[i]));
        }

        initColumns();

    });

    function initColumns() {
        var tableData = parent.$('#printCenter > label[type="table"][c="1"][select="1"]').data();
        if( tableData && tableData.property && tableData.property.table && tableData.property.table.length > 0 ){
            var columns = tableData.property.table;
            for( var i=0 ; i<columns.length ; i++ ){
                initColumn(columns[i]);
            }
        }
    }

    function initColumn(column) {
        createLi({text:column.text,name:column.name},column.property);
    }

    function createLi(options,dbProperty) {
        var text = options.text;
        var i = $('<i class="fa fa-remove"></i>');
        i.click(function () {
            $(this).parent().remove();
        });
        var tid = 't'+new Date().getTime();
        var li =$('<li data-name="'+options.name+'" id="'+tid+'" select="0" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>'+text+'</li>');
    	li.click(function () {
            $( "#sortable li" ).attr('select','0').css({"background": "#f6f6f6","color":"#454545"});
            $(this).attr('select','1').css({"background": "#336600","color":"#ffffff"});

            var property = $(this).data().property;
            setPropertys(tid,property);
        });

        $( "#sortable li" ).attr('select','0').css({"background": "#f6f6f6","color":"#454545"});
        li.attr('select','1').css({"background": "#336600","color":"#ffffff"});

        li.append(i);
        var defTableExt = {};
        if(dbProperty){
            defTableExt = dbProperty;
        }else{
            $.extend(defTableExt,defTable);
            defTableExt.columnName = options.text;
        }
        li.data({property:defTableExt});
    	$('#sortable').append(li);
        setPropertys(tid,defTableExt);
    }


    function createLeftLabel(heads){
        for( var i=0 ; i<heads.length ; i++ ){
            var row = heads[i];
            var moveLabel = $('<label data-name="'+row.value+'" class="print-move-span" >'+row.name+'</label>');
            moveLabel.data({org:row});
            moveLabel.draggable({
                revert:false,scroll:false,zIndex:10000,addClasses: false,helper: "clone"
            });
            $('#left').append(moveLabel);
        }
    }

    app.getOkBtn().click(function () {
        var tableJson = [];
		$('#sortable > li').each(function () {
		    var data = $(this).data();
            var property = data.property;
            tableJson.push({property:property,name:$(this).attr('data-name'),text:$(this).text()});
        });
		parent.$('#printCenter > label[type="table"][c="1"][select="1"]').data().property.table = tableJson;
		app.closeLastWindow();
    });

    var defTable = {columnName:'',autoWidth:{value: "1", text: "是"},width:100,align:{value: "center", text: "居中"},format:'',titleFont:["宋体","normal","normal",11,"none",'字体[宋体],字形[常规],大小[11] 效果[无]']
    ,ctxFont:["宋体","normal","normal",11,"none","字体[宋体],字形[常规],大小[11] 效果[无]"]};

    var columns = {
        data:[
            {
                title:'',
                rows:[
                    {
                        label:'列名称',edit:'text',text:'',name:'columnName'
                    },
                    {
                        label:'宽度自动',edit:'select',value:'1',text:'是',name:'autoWidth',
                        values:[
                            {name:'是',value:'1'},
                            {name:'否',value:'0'}
                        ]
                    },
                    {
                        label:'宽度(像素)',edit:'number',text:'100',name:'width'
                    },
                    {
                        label:'文本位置',edit:'select',value:'center',text:'居中',name:'align',
                        values:[
                            {name:'靠左',value:'left'},
                            {name:'靠右',value:'right'},
                            {name:'居中',value:'center'}
                        ]
                    },
                    {
                        label:'格式化字符串',edit:'format',text:'',name:'format'
                    },
                    {
                        label:'表头字体',edit:'font',text:'字体[黑体],字形[常规],大小[11]',data:{font:'黑体',weight:'常规',size:11,
                            css:["黑体","normal","normal",11,"none"]
                        },name:'titleFont'
                    },
                    {
                        label:'表体字体',edit:'font',text:'字体[宋体],字形[常规],大小[11]',data:{font:'宋体',weight:'常规',size:11,
                            css:["宋体","normal","normal",11,"none"]
                        },name:'ctxFont'
                    }
                ]
            }
        ]
    };
</script>
</body>
</html>